<template>
  <div class="about" style="padding-bottom:600px;background: #F7F7F7;height: 900px;">
    <!-- 顶部 -->
    <div class="header">
      <span><img src="img/return.png" alt="" /></span>
      <span>购物车</span>
      <span @click="cli()">编辑</span>
    </div>
    <!-- 商品 -->
    <div style="height:55px" ></div>
        <div class="right-contain" v-for="(item,index) in productList" :key="index">
            <div><input type="checkbox"   v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"></div>                                 
            <div> <img :src="item.src"/></div>
         <div>
             <p class="p1">{{item.proName}}</p>
             <p class="p2"><span>浏览:{{num1}} </span><span>收藏:{{num2}}</span> </p>             
             <p class="p4"><span>￥{{item.proPrice}}</span><span><i  @click="item.proNum>1?item.proNum--:''">-</i><button>{{item.proNum}}</button><i @click="item.proNum++">+</i></span></p>
         </div>
        
</div>
<!-- 空页面显示图片 -->
<div id="back">
  <img src="img/null.jpg" alt="">
  <p>这里只有孤单一个我...</p>
  <button>去首页逛逛</button>
</div>
 <!-- 底部 -->
         <footer id="nav">
    <span class="nav_1"><input type="checkbox"  @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll"></span>
    <span class="nav_2" v-show="is_show">全选</span>
    <span class="nav_3" v-show="is_show">¥<i>{{getTotal.totalPrice}}</i><i>.00</i></span>   
    <span class="nav_4" v-show="is_flag"  @click="deleteProduct"><i class="iconfont iconlajitong"></i></span>   
    <span><router-link  :to="path"  @click.native="order()"> 结算</router-link></span>
    </footer>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
// 顶部
.header {
  background-color: #ffffff;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  span {
    font-size: 18px;
    line-height: 43px;
    // margin-left: -26px;
    overflow: hidden;
    img {
      width: 25px;
      float: left;
      margin: 7px 0 0 10px;
    }
  }
  span:last-child{
    float: right;
    font-size: 16px;
    margin-right: 15px;
  }
}
// 空购物车显示背景
#back{
      width: 250px;
    height: 200px;
    text-align: center;
    margin: 60px auto;
    display: none;
    img{
      width: 100%;
    }
    p{
      color: #9c9696;
    }
    button{
      width: 47%;
    margin-top: 13px;
    background-color: #FF8434;
    border: none;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    border-radius: 15px;
    }
}
// 商品
.right-contain{
     width: 93%;
    padding: 10px 10px;
    margin: 20px auto 20px;
    border-radius: 15px;
    display: flex;
    background-color: #fff;
}
.right-contain div:first-child{
  flex: 1;
  margin-top: 51px;
  text-align: center;
  input{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance: none;
    border: 1px solid #FF8434;
    border-radius: 50%;
    outline: none;
        }
  input:checked{
        background: url("../../public/img/check4.png") no-repeat center center ;
         background-size: 100%;
        }
}
.right-contain div:nth-child(2){
  flex: 4;
  img{
    width: 100%;
    height: 100%;
  }
}
.right-contain div:nth-child(3){
  flex: 6;
}
.right-contain .p1{
    width: 100%;
    height: 60px;
    line-height: 20px;
    font-size: 16px;
    overflow: hidden;
}
.right-contain .p2{
    color: rgba(136, 98, 98, 0.8);
    height: 16px;
    margin-top: 7px;
    line-height: 16px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    span{
      text-align: center;
    }
}
.right-contain .p4{
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.right-contain .p4 span:nth-child(1){
    font-size: 18px;
    color: #FF8434;
    line-height: 18px;
    
}
.right-contain .p4 span:nth-child(2){
    font-size: 18px;
    width: 50%;
    line-height: 18px;
    text-align: center;
    
}

.right-contain .p4  span i{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #d6d2d2;
  border-radius: 50%;
}
.right-contain .p4 button{
  width: 20px;
  text-align: center;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
}
// 底部
 #nav{
    width: 100%;
    position: fixed;
    background-color: #fff;
    height: 45px;
    left: 0px;
    padding-left: 5px;
	  bottom: 55px;
    display: flex;
    // justify-content: space-around;
    // text-align: center;
    font-size: 12px;
    span{
    line-height: 45px;
    input{
     width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance: none;
    border: 1px solid #FF8434;
    border-radius: 50%;
    outline: none;
        }
      input:checked{
           
            background: url("../../public/img/check4.png") no-repeat center center ;
         background-size: 100%;
        }  
    }
  }
  .nav_1{
    width: 8%;
    margin-top: 6px;
    margin-left: 13px;
    // text-align: right;
}
.nav_2{
    width: 30%;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    // text-align: center;
    // padding-left: 10px;
    i{
      margin-left: 6px;
    }
    // border-left: 1px solid #cccccc;
}
.nav_3{
    width: 30%;
    line-height: 45px;
    font-size: 20px;
    color: #FF8434;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}
.nav_4{
  width:60%;
  height: 45px;
    line-height: 45px;
    font-size: 16px;
    // text-align: center;
    // padding-left: 20px;
    i{
      margin-left: 6px;
      font-size: 22px;
      color:#FF8434 ;
    }
}
#nav span:last-child{
    // flex: 2.5;
    width: 32%;
    float: right;
    line-height: 45px;
   color: #fff;
   text-align: center;
    background-color: #FF8434;
     font-size: 16px;
     a{
       color: #fff;
       text-decoration: none;
     }
}
</style>


<script>
export default{
  data(){
    return{
      num1:666,num2:999,
      productList:[ // 底部标签数据
        // {src:"../../img/jing_1.jpg",proName:'新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠',proPrice:'35',num1:666,num2:999,proNum:1},
        // {src:"../../img/jing_2.jpg",proName:'新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠',proPrice:'35',num1:666,num2:999,proNum:1},
        // {src:"../../img/jing_3.jpg",proName:'新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠新鲜青柠',proPrice:'35',num1:666,num2:999,proNum:1},
       
      ],
      path:'/Order',
      is_show:true,
      is_flag:false,
      allPrice:'',
    }
  },
 methods:{
			selectProduct:function(_isSelect){
                //遍历productList，全部取反
                for (var i = 0, len = this.productList.length; i < len; i++) {
                    this.productList[i].isSelect = !_isSelect;
                }
            },
			deletePro : function(index){
				alert("你正在删除"+this.productList[index].proName);
				this.productList.splice(index,1);
			},
			//删除已经选中(isSelect=true)的产品
            deleteProduct:function () {
                this.productList=this.productList.filter(function (item) {return !item.isSelect})
            },
      cli(){
        this.is_show=!this.is_show;
        this.is_flag=!this.is_flag;

      },
      order(){
         this.$store.commit("order",this.productList);
         localStorage.setItem('allPrice',JSON.stringify(this.allPrice));
        //  this.$store.commit("order_2",this.allPrice);
        var arr = this.productList.filter(function (value) {
            return value.isSelect;
    });
        console.log(arr);
         this.$axios.post("http://47.114.130.21:3003/Shopping",{name:this.$store.state.username,amount:arr}).then((data) => {
          console.log(111);
    });
      
      }
      
    },
   

  computed:{
			//检测是否全选
            isSelectAll:function(){
                //如果productList中每一条数据的isSelect都为true，返回true，否则返回false;
                return this.productList.every(function (val) { return val.isSelect});
                if(this.productList==''){
              $("#back").css("display",'block');
              }
            },
			getTotal:function(){
				var prolist = this.productList.filter(function (val) { return val.isSelect}),
				totalPri = 0;
				for (var i = 0,len = prolist.length; i < len; i++) {
					totalPri+=prolist[i].proPrice*prolist[i].proNum;
        }
        this.allPrice=totalPri;
        if(this.productList==''){
              $("#back").css("display",'block');
              }
				return {totalNum:prolist.length,totalPrice:totalPri}
      },
      
    },
    created(){
     
    },
    mounted(){
      
     var person=JSON.parse(localStorage.getItem('personMsg'));   //获取本地存储的用户地址等信息 
       if(person==null){
         $("#back").css("display",'block');
       }else{
                  this.$store.state.username=person.name; 
                console.log( this.$store.state.username);
                var person=JSON.parse(localStorage.getItem('personMsg'));   //获取本地存储的用户地址等信息
        this.$store.state.username=person.name;   // 获取当前登录的用户名
        // this.$store.state.arr=person.list; 
      // console.log(this.$store.state.username);
      this.$axios.post("http://47.114.130.21:3003/Shop",{name:this.$store.state.username}).then((data) => {
        console.log(data.data[0].list);
        this.productList=data.data[0].list;
        // this.productList=this.$store.state.arr;
        console.log(this.productList);
        var _this=this;
        //为productList添加select（是否选中）字段，初始值为true
        this.productList.map(function (item) {
            _this.$set(item, 'isSelect', true);
        })
      });
    
      // console.log(this.$store.state.arr);
      // this.productList=this.$store.state.arr;
    
       }
    	}

}
</script>